<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <h2>历史搜索</h2>
    <input type="text" id="input">
    <div class="container"></div>
    <script>
        //定义一个数组
        var historys = [];
        // 输入框按下的时候触发事件
        $("#input").keydown(function(event){
            // 按下回车键和输入的值不为空时
            if(event.keyCode==13 && $(this).val()!=''){
            //    获取输入框的值
                var keyword = $(this).val();
            // 渲染到页面上
               var template = `
                <button>${keyword}</button>
                `
                // 当数组中不包含其输入的值时
                if(!historys.includes(keyword)){
                // 向数组和页面中添加输入值
                    historys.unshift(keyword);
                    $(".container").prepend(template);
                    $(this).val('')
                }
                // 当数组中包含其输入的值时
                else{
                    // 获得已有值下标
                    var index = historys.indexOf(keyword);
                    // 删除已有的值
                    historys.splice(index,1); 
                    $(".container button").eq(index).remove();
                    // 添加到最前面
                    historys.unshift(keyword);
                    $(".container").prepend(template);
                    $(this).val('')
                }
                console.log(historys)
            }
            
        })
        
    </script>
</body>
</html>